<template>
  <div>
    <navheader @add="add"></navheader>
    <navmain :list='list' @del='del'></navmain>
    <navfooter :list='list' @dels='dels'></navfooter>
  </div>
</template>
<script>
import navheader from "../components/navheader/navheaver.vue";
import navmain from "../components/navmain/navmain.vue";
import navfooter from "../components/navfooter/navfooter.vue";
import { ref , computed} from "vue";
import {useStore}from 'vuex'
export default {
  name: "Home",
  components: {
    navheader,
    navmain,
    navfooter,
  },
  setup() {
    let store=useStore()
    let list =computed(()=>{
      return store.state.list
    })
    let value = ref("");
    //添加

    let add = (val) => {
      value.value = val;
      //判重
      let flag=true
      list.value.map(item=>{
        if(item.title===value.value){
          //有重复的
          flag=false
          alert('哥们儿，哥们儿,重复了')
        }
      })
      if(flag){
        //调用mutation
      store.commit('addtodo',{
        title:value.value,
        text:false
      })
      console.log(val);
    };
      }
      //删除
      let del=(val)=>{
        //调用删除的mutation
        store.commit('del',val)
      }
      //清除已完成的
      let dels=(val)=>{
        store.commit('dels',val)
      }
    return { add, value , list,store,del,dels};
  },
};
</script>
<style lang="scss" scoped>
</style>